.mu-select {

  position: relative;


  @include box(0, 0, 75px, 30px);
  @include border(none, 5px);
  @include click;


  background: #fff;

  .select {
    @include box;

    @include flex-center;

    .label {
      font-weight: 600;
    }

    .icon {

      @include box(0 0 0 6px, 0, 16px, 16px);
      @include border(none, 3px);
      @include transition(0.1s);
      @include flex-center;

      transform: rotate(0deg);


      i {
        color: #fff;
      }
    }

    &.action {
      .icon {
        transform: rotate(180deg);
      }
    }
  }

  .options {
    position: absolute;
    z-index: 2000;
    overflow: hidden;

    @include box(0, 12px 0 6px 0, 100%, auto);


    .op-items {
      background-color: #fff;
      @include border(1px solid #e4e7ed, 4px);
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }

    .op-arrow {
      top: -6px;
      left: 20%;
      margin-right: 3px;
      border-top-width: 0;
      border-bottom-color: #ebeef5;
      border-width: 6px;
      filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));

      &,
      &::after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
      }

      &::after {
        content: "";
        top: 1px;
        margin-left: -6px;
        border-top-width: 0;
        border-bottom-color: #fff;
        border-width: 6px;
      }
    }
  }
}
